<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #wrapper {
      width: 100%;
      height: 300px;
      border: 1px solid #000;
    }

    .gantt_cell {
      position: absolute;

      width: 200px;
      height: 100px;
      background-color: #f00;
    }

    .gantt_cell_1 {
      left: 0;
      top: 0;
    }

    .gantt_cell_1 {
      left: 0;
      top: 110px;
    }
  </style>
</head>

<body style="width: 100vw; height: 100vh">
  <div id="wrapper">
    <div class="gantt_cell gantt_cell_1"></div>
    <div class="gantt_cell gantt_cell_2"></div>
  </div>

  <script src="./static/jquery/jquery.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', (e) => {
      console.log('DOM fully loaded and parsed');
      console.log(e)
    });

    $('#wrapper').on('mousedown', '.gantt_cell', function (e) {
      let isDragging = false;
      let startX = e.pageX;
      let currentX = startX;
      const _cell = $(this);

      $(document).on('mousemove.drag', function (e) {
        let deltaX = e.pageX - startX;
        if (!isDragging && Math.abs(deltaX) > 0.1) {
          isDragging = true;
        }

        if (isDragging) {
          let moveDistance = e.pageX - currentX;
          currentX = e.pageX;
          console.log('正在横向拖拽', moveDistance);
          if (deltaX < 0) {
            deltaX = 0;
          }
          _cell.css({
            left: `${deltaX}px`,
          });
        }
      });

      $(document).on('mouseup.drag', function (e) {
        $(document).off('mousemove.drag mouseup.drag');

        if (isDragging) {
          console.log('结束横向拖拽');
          // 在这里添加拖拽结束时的逻辑
          // 例如：保存新位置，更新数据等
          let finalDeltaX = e.pageX - startX;
          console.log('总移动距离：', finalDeltaX);
        }

        // 重置状态
        isDragging = false;
      });
    });
  </script>
</body>

</html>